<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../static/layui/css/layui.css"/>
  <style type="text/css">
    .layui-input {
      border-radius: 5px;
      width: 300px;
      height: 38px;
      font-size: 16px;
    }
    
    div {
      margin-top: 10px;
    }
    
    label {
      font-size: 22px;
      /* 背景透明 */
      color: transparent;
      /* 文字背景 */
      -webkit-background-clip: text;
      background-image: linear-gradient(to bottom, #72C6EF, #004E8F);
    }
  </style>
</head>
<body>
<div class="panel panel-info" style=" margin-left: 30px;">
  <!-- <form action="home.html" method="post"> -->
  
  <form class="layui-form" th:action="@{/addData}" method="post">
    <input type="hidden" th:value="${token}" id="token" name="token">
    
    <div>
      <label>用户名称</label>
      <div>
        <label for="username"></label><input type="text" id="username" name="username" placeholder="请输入用户名称"
                                             class="layui-input">
      </div>
    </div>
    
    <div>
      <label>用户邮箱</label>
      <div>
        <label for="useremail"></label><input type="email" id="useremail" name="useremail" placeholder="请输入用户邮箱"
                                              class="layui-input">
      </div>
    </div>
    
    <div>
      <label>用户密码</label>
      <div>
        <label for="password"></label><input type="password" id="password" name="password" placeholder="请输入密码"
                                             class="layui-input">
      </div>
    </div>
    
    <button style="display: none;" type="submit" id="ok">Submit</button>
  </form>

</div>
<script src="../static/jquery/jquery-3.6.0.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script>
  $(document).ready(function () {
    $('#ok').click(function () {
      console.log("你点击了输入框")
    });
  });
</script>
</body>
</html>
